<template>
  <CompOperate
    :field="field"
    :designer="designer"
    :design-state="designState"
    :parent-list="parentList"
    :parent-widget="parentWidget"
    :sub-form-row-id="subFormRowId"
    :sub-form-row-index="subFormRowIndex"
    :sub-form-col-index="subFormColIndex"
    :index-of-parent-list="indexOfParentList"
    :display-style="field['options'].displayStyle"
  >
    <div class="scene-DRC-double-info-widget" :style="getStyle('head')">
      <div class="widget-inside">
        <!-- 诊室 currentItem-->
        <div class="leftRoot">
          <div
            v-for="item in [
              { title: '脑科', value: '1' },
              { title: '呼吸内科', value: '2' },
              { title: '骨科', value: '3' },
              { title: '眼科', value: '4' },
              { title: '耳科', value: '5' },
            ]"
            :class="currentItem==item.value?'RootItem-Active':'RootItem' "
            @click="clickItem(item)"
          >
            {{ item.title }}
          </div>
        </div>
        <!--医生排班业务-->
        <div class="doc-scheduling-info">
          <template v-for="(item, index) in getRoomDoctorInfo">
            <div class="doctor-describe-inline-block Itembottom" :key="index">
              <div
                :class="
                  index % 2 === 0
                    ? 'doctor-describe '
                    : 'doctor-describe doctor-describe-right'
                "
                :key="widgetKey"
              >
                <div class="left">
                  <img :src="getDoctorPicture(item?.workerInfo)" alt="医生" />
                </div>
                <div class="right">
                  <!--医生相关信息-->
                  <div class="doc-desc-info">
                    <div class="title">
                      <div class="name">
                        <ScrollX>
                          {{
                            item?.workerInfo?.workerName || "\u00a0"
                          }}</ScrollX
                        >
                        <!-- {{ item?.workerInfo?.workerName || '\u00a0' }} -->
                      </div>
                      <div
                        class="academic—title"
                        v-if="item?.workerInfo?.workerTitle"
                      >
                        <ScrollX>{{
                          item?.workerInfo?.workerTitle || "\u00a0"
                        }}</ScrollX>
                        <!-- {{ item?.workerInfo?.workerTitle || "\u00a0" }} -->
                      </div>
                    </div>
                    <div class="desc">
                      <ScrollY
                        :content="item?.workerInfo?.workerIntro || '\u00a0'"
                        :pageDuration="10"
                      />
                    </div>
                  </div>
                  <!--排版的界面-->
                  <div class="scheduling">
                    <div class="scheduling-inside">
                      <div class="header">
                        <div
                          class="item"
                          v-for="(item, index) in TitleWeekInfo"
                          :key="index"
                        >
                          {{ item.label }}
                        </div>
                      </div>
                      <div
                        class="content"
                        v-for="(RowItem, RowIndex) in item.scheduleList ||
                        scheduleList"
                        :key="RowIndex"
                      >
                        <div
                          :class="index == '0' ? 'itemPlus' : 'item'"
                          v-for="(item, index) in TitleWeekInfo"
                          :key="index"
                        >
                          <template v-if="index == 0">
                            {{ RowItem.noonName }}
                          </template>
                          <template v-else-if="RowItem[item.status].status">
                            √
                          </template>
                          <template v-else> </template>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </template>
        </div>
      </div>
    </div>
  </CompOperate>
</template>

<script>
import { pxToVw } from "@/utils/common";
import emitter from "@/utils/designer/emitter";
import { buildParentApi } from "@/utils/designer/util";
import mixin from "@sc/templateDetails/modules/homeMiddle/fieldMixin";
import CompOperate from "@c/public/form-designer/devType/modules/compOperate.vue";
import ScrollY from "@c/public/seamlessScroll/ScrollY.vue";
import ScrollX from "@c/public/seamlessScroll/ScrollX.vue";
import vueSeamlessScroll from "vue-seamless-scroll";
import { v4 as uuid } from "uuid";

let buildParent = buildParentApi();

export default {
  name: "scene-picture-doctor-schedule-tabs-widget",

  componentName: "FieldWidget", //必须固定为FieldWidget，用于接收父级组件的broadcast事件

  mixins: [emitter, mixin],

  components: {
    ScrollX,
    ScrollY,
    vueSeamlessScroll,
    CompOperate,
  },

  props: {
    widget: Object,
    field: Object,
    parentWidget: Object,
    parentList: Array,
    indexOfParentList: Number,
    designer: Object,
    designState: {
      type: Boolean,
      default: false,
    },
    devType: {
      type: Boolean,
      default: false,
    },
    subFormRowIndex: {
      /* 子表单组件行索引，从0开始计数 */ type: Number,
      default: -1,
    },
    subFormColIndex: {
      /* 子表单组件列索引，从0开始计数 */ type: Number,
      default: -1,
    },
    subFormRowId: {
      /* 子表单组件行Id，唯一id且不可变 */ type: String,
      default: "",
    },
    headTitle: {
      type: String,
      default: "",
    },
    visibleTitle: {
      type: Boolean,
    },
    //prop传入的表单JSON配置
    parentApi: {
      type: Object,
      default: () => buildParentApi(),
    },
  },

  data() {
    return {
      widgetKey: uuid(),
      optionsInfo: Object(),
      header: require("@a/images/design/header.jpeg"),
      pause: require("@a/images/design/pause.png"),
      TitleWeekInfo: [
        { label: "排班", value: 0, status: "farewell" },
        { label: "周一", value: 1, status: "weekMon" },
        { label: "周二", value: 2, status: "weekTue" },
        { label: "周三", value: 3, status: "weekWed" },
        { label: "周四", value: 4, status: "weekThur" },
        { label: "周五", value: 5, status: "weekFri" },
        // { label: "周六", value: 6, status: "weekSat" },
        // { label: "周日", value: 7, status: "weekSun" },
      ],
      scheduleList: [
        {
          noonId: "1",
          noonName: "上午",
          weekMon: {
            status: false,
            week: 0,
          },
          weekTue: {
            status: false,
            week: 1,
          },
          weekWed: {
            status: false,
            week: 2,
          },
          weekThur: {
            status: false,
            week: 3,
          },
          weekFri: {
            status: false,
            week: 4,
          },
          weekSat: {
            status: false,
            week: 5,
          },
          weekSun: {
            status: false,
            week: 6,
          },
        },
        {
          noonId: "2",
          noonName: "下午",
          weekMon: {
            status: false,
            week: 0,
          },
          weekTue: {
            status: false,
            week: 1,
          },
          weekWed: {
            status: false,
            week: 2,
          },
          weekThur: {
            status: false,
            week: 3,
          },
          weekFri: {
            status: false,
            week: 4,
          },
          weekSat: {
            status: false,
            week: 5,
          },
          weekSun: {
            status: false,
            week: 6,
          },
        },
        {
          noonId: "3",
          noonName: "晚班",
          weekMon: {
            status: false,
            week: 0,
          },
          weekTue: {
            status: false,
            week: 1,
          },
          weekWed: {
            status: false,
            week: 2,
          },
          weekThur: {
            status: false,
            week: 3,
          },
          weekFri: {
            status: false,
            week: 4,
          },
          weekSat: {
            status: false,
            week: 5,
          },
          weekSun: {
            status: false,
            week: 6,
          },
        },
      ],
      currentItem: "3",
    };
  },

  computed: {
    // 设置的行内样式
    getStyle() {
      return function (val) {
        const self = this;
        let info = self.optionsInfo || Array();
        let Obj = Object();
        console.log("info.backgroundColor", info.backgroundColor);
        switch (val) {
          case "head":
            Reflect.set(Obj, "height", pxToVw(info.headHeight));
            Reflect.set(Obj, "backgroundColor", `${info.backgroundColor}`);
            return Obj;
          case "picture":
            Reflect.set(Obj, "height", pxToVw(info.imageHeight));
            Reflect.set(Obj, "width", pxToVw(info.imageWidth));
            Reflect.set(Obj, "borderRadius", pxToVw(info.imageRadius));
            return Obj;
        }
      };
    },
    // 获取全量医患信息
    getRoomDoctorInfo() {
      let devType = this.devType;
      let listInfo = Array();
      let roomDoctorInfo = this.$store.getters["getDoctorSchedulingInfo"];
      if (devType) {
        listInfo = roomDoctorInfo.apiData;
      } else {
        listInfo = roomDoctorInfo.mockData;
      }
      listInfo = listInfo.map((item) => {
        if (item.scheduleList.length > 6) {
          item.scheduleList = item.scheduleList.slice(0, 6);
        }
        return item;
      });
      if (!!listInfo?.length) {
        if (listInfo.length >= 4) {
          return listInfo.slice(0, 4);
        } else {
          let arr = new Array(4 - listInfo.length).fill({});
          return [...listInfo, ...arr];
        }
      } else {
        return new Array(4).fill({});
      }
    },

    // 获取医生头像
    getDoctorPicture() {
      return function (row) {
        // let isPause = row?.isPause;
        let header = "/tpleditor/resource/assets/images/header.png";
        return row?.workerPicture || header;
      };
    },
  },

  created() {
    this.registerToRefList();
    this.initEventHandler();
    this.handleOnCreated();
  },

  mounted() {
    this.handleOnMounted();
  },

  methods: {
    clickItem(item){
      this.currentItem = item.value
    },
    // 接收父组件传递过来的数据
    async executeMethod(key, data) {
      switch (key) {
        case "publishListInfo":
          this.widgetKey = uuid();
          let publicListInfo = this.$lodash.cloneDeep(data);
          await this.$store.dispatch("setDoctorSchedulingInfo", publicListInfo);
          break;
      }
    },
  },

  watch: {
    field: {
      handler: function (val) {
        let key = val.options.config;
        this.widgetKey = uuid();
        this.optionsInfo = val.options[key];
      },
      deep: true,
      immediate: true,
    },
  },

  destroyed() {
    this.unregisterFromRefList();
  },
};
</script>

<style lang="scss" scoped>
.scene-DRC-double-info-widget {
  padding: 28px 30px;
  box-sizing: border-box;
  flex: inherit;
  flex-direction: column;
  justify-content: space-between;
  color: #333;
  // height: 150px;
  font-size: 40px;
  background: transparent;
  overflow: hidden;

  .widget-inside {
    // height: calc(100%);
    height: 870px;
    // border-radius: 0px 0px 16px 16px;
    overflow: hidden;
    display: flex;
    //  左侧科室
    .leftRoot {
      width: 296px;
      height: 870px;
      background: white;
      margin-right: 20px;
      border: 2px solid #dddddd;
      border-radius: 20px;
      .RootItem {
        width: 296px;
        height: 120px;
        font-weight: 500;
        font-size: 42px;
        display: flex;
        align-items: center;
        justify-content: center;
      }
      .RootItem-Active{
        width: 296px;
        height: 120px;
        font-weight: 500;
        font-size: 42px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #0059B3;
        background: #CCDEF0;
        border-left: 10px solid #0059B3;
        box-sizing: border-box;
      }
    }
    //
    .doc-scheduling-info {
      font-size: 42px;
      width: 1554px;
      // height: 870px;
      background: white;
      border-radius: 20px;
      padding: 20px;
      // display: flex;
      // flex-direction: column;
      // margin-top: 24px;
      .doctor-describe-inline-block {
        display: inline-block;
        width: 743px;
      }
      .Itembottom {
        margin-bottom: 20px;
      }
      .doctor-describe {
        display: flex;
        width: 743px;
        height: 405px;
        //图片视图
        .left {
          width: 280px;
          height: 405px;
          overflow: hidden;
          margin-right: 18px;
          box-sizing: border-box;
          display: flex;
          flex-shrink: 0;
          border-radius: 16px;
          border: 1px #cccccc solid;

          img {
            width: 100%;
            height: 100%;
            object-fit: cover;
          }
        }

        //文字视图
        .right {
          // width: calc(100% - 320px);
          width: 453px;
          height: 405px;
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          .doc-desc-info {
            width: 453px;
            // display: flex;
            overflow: hidden;
            // min-height: 220px;
            margin-bottom: 9px;
            .title {
              // height: 70px;
              // width: 250px;
              display: flex;
              align-items: center;
              // justify-content: center;
              // align-self: start;
              // margin-right: 14px;
              box-sizing: border-box;
              // height: 70px;
              .name {
                // width: 400px;
                max-width: 400px;
                overflow: hidden;
                font-weight: bolder;
                // line-height: 108px;
                margin-right: 30px;
                :deep(.st-inner) {
                  margin: inherit;
                }
              }

              .academic—title {
                background: #0059b3;
                max-width: 320px;
                font-size: 30px;
                // line-height: 50px;
                // height: 50px;
                text-align: left;
                color: #fff;
                padding: 4px 14px;
                border-radius: 5px;
              }
            }

            .desc {
              font-size: 26px;
              // height: 200px;
              height: 113px;
              margin-top: 7px;
              // width: calc(100% - 266px);
              overflow: hidden;
              text-overflow: ellipsis;
              display: -webkit-box;
              -webkit-line-clamp: 5;
              color: rgba(153, 153, 153, 1);
              line-height: 48px;
              -webkit-box-orient: vertical;
            }
          }

          .scheduling {
            width: 100%;
            //margin-top: 30px;
            align-items: end;
            align-self: flex-end;

            .scheduling-inside {
              width: 100%;

              .header {
                display: flex;
                height: 46px;
                line-height: 46px;
                padding: 0;

                .item {
                  flex: 1;
                  font-size: 18px;
                  text-align: center;
                  justify-content: center;
                  border: 1px #babbbd solid;
                  border-radius: 8px 8px 0 0;
                }
              }

              .content {
                display: flex;
                height: 46px;
                line-height: 46px;
                .itemPlus {
                  flex: 1;
                  font-size: 18px;
                  background: white;
                  text-align: center;
                  justify-content: center;
                  border: 1px #babbbd solid;
                  border-radius: 8px 0 0 8px;
                }
                .item {
                  flex: 1;
                  font-size: 18px;
                  background: white;
                  text-align: center;
                  justify-content: center;
                  border: 1px #babbbd solid;
                  // border-radius: 0 0 8px 8px;

                  &:first-child {
                    background: #f4f4f4;
                  }
                }
              }
            }
          }
        }
      }
      .doctor-describe-right {
        width: 100%;
        margin-left: 20px;
      }
    }
  }
}
</style>